$blackWrapBk: #212936;
$blackWrapBk1: #3C495F;
$blackFormBk: #354154;
$blackFontColor: #9FACC3; // 灰色
//$blackFontColor2: #27CCD9; // 绿色
$blackFontColor2: #409EFF;
$blackFontColor3: #409EFF; // 蓝色
$white: #fff;
$blackWrapBk2: #F5A623; // 橙色

.skin-black {
  background-color: #3C495F!important;
  .app-content-wrap {
    background-color: $blackWrapBk;
  }
  .g-content-title {
    color: $white;
    background-color: $blackWrapBk1;
    border: none;
  }
  .font_icon {
    background-color: $blackWrapBk1 !important;
    border-color: $blackWrapBk1!important;
  }
  .el-form-item__label {
    color: $blackFontColor;
  }
  .el-form-item__content {
    color: $white;
  }
  .el-input__inner {
    background-color: $blackFormBk;
    border-color: $blackFormBk;
    color: $white;
  }
  .el-input__inner:hover {
    border-color: $blackFormBk;
  }
  .el-input__inner:focus {
    border-color: $blackFormBk;
  }
  .el-select-dropdown {
    background-color: $blackFormBk;
    border-color: $blackFormBk;
  }
  .el-select-dropdown__item {
    color: $blackFontColor;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: $blackFormBk;
  }
  .el-select-dropdown__item.selected {
    color: $white;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: $blackFormBk;
  }
  .el-select .el-input__inner:focus {
    border-color: $blackFormBk;
  }
  .el-select:hover .el-input__inner {
    border-color: $blackFormBk;
  }
  .el-select .el-input.is-disabled .el-input__inner:hover {
    border-color: $blackFormBk;
  }
  .el-form-item.is-error .el-input.is-disabled .el-input__inner {
    border-color: #f56c6c;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: $blackFormBk;
    border-color: $blackFormBk;
  }
  .el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: $blackFormBk;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: $blackFormBk;
  }
  // textarea
  .el-textarea__inner {
    background-color: $blackFormBk;
    border-color: $blackFormBk;
    color: $white;
  }
  .el-textarea__inner:hover {
    border-color: $blackFormBk;
  }
  .el-textarea__inner:focus {
    border-color: $blackFormBk;
  }
  // date
  .el-picker-panel, .el-picker-panel__footer {
    background-color: $blackFormBk;
    border-color: $blackFormBk;
  }
  .el-picker-panel__icon-btn {
    color: $blackFontColor;
  }
  .el-date-picker__header-label {
    color: $white;
  }
  .el-date-table th, .el-date-table td.available span {
    color: $white;
  }
  .el-month-table td .cell {
    color: $blackFontColor;
  }
  .el-picker-panel .el-input__inner {
    border-color: $blackFontColor;
  }
  .el-picker-panel__footer .el-button.is-plain {
    background-color: $white;
    border-color: $blackFontColor;
  }
  .el-time-panel {
    background-color: $blackFormBk;
    border-color: $blackFontColor;
  }
  .el-time-spinner__item {
    color: $blackFontColor;
  }
  .el-time-spinner__item:hover:not(.disabled):not(.active) {
    background-color: $blackFormBk;
  }
  .el-time-spinner__item.active:not(.disabled) {
    color: $white;
  }
  .el-time-panel__content::after, .el-time-panel__content::before {
    border-color: $blackFontColor;
  }
  .el-time-panel__footer {
    border-color: $blackFontColor;
  }
  .el-time-panel__btn {
    color: $blackFontColor;
  }
  // table
  .el-table {
    color: $blackFontColor;
  }
  .el-table .el-button--text {
    //color: $blackFontColor2;
  }
  .el-table th, .el-table tr {
    background-color: $blackFormBk;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: $blackFormBk;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: $blackFormBk;
  }
  .el-table thead {
    color: $white;
  }
  .el-table thead th {
    background-color: rgba(0, 0, 0, .2);
  }
  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-color: #666;
  }
  .el-table td, .el-table th.is-leaf {
    border-color: #666;
  }
  .el-table--border, .el-table--group {
    border-color: #666;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: #666;
  }
  .el-table__body-wrapper {
    background-color: $blackFormBk;
    color: $white;
  }
  .el-table__empty-text {
    color: $white;
  }
  // pagination
  .el-pagination {
    color: $blackFontColor;
  }
  .el-pagination__total, .el-pagination__jump {
    color: $blackFontColor;
  }
  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: rgba(0, 0, 0, 0);
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: $blackFontColor2;
  }
  // btn
  .btn-default {
    border-color: $blackFontColor2 !important;
    color: $blackFontColor2 !important;
  }
  .el-button--primary {
    border-color: $blackFontColor2;
    color: $white;
    background-color: $blackFontColor2;
  }
  .el-button--text, .el-button--text:hover {
    color: $blackFontColor2;
  }
  .el-button--primary:focus, .el-button--primary:hover {
    background-color: $blackFontColor2;
    border-color: $blackFontColor2;
  }
  // tree-table
  .el-icon-arrow-right:before, .el-icon-arrow-down:before {
    color: $blackFontColor;
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    background-color: $blackFontColor2;
    border-color: $blackFontColor2;
  }
  // dialog
  .el-dialog {
    background-color: $blackWrapBk;
  }
  .el-dialog__title {
    color: $white;
  }
  .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
    border-color: rgba(0, 0, 0, 0);
  }
  // calendar
  .report-content-wrap {
    .calendar table {
      color: $white !important;
      background-color: $blackFormBk;
    }
    .calendar table td.disabled {
      color: $blackFontColor !important;
    }
    .calendar-box .title, .alerm-list .title, .title {
      color: $white;
    }

    .calendar td {
      border-color: $blackWrapBk !important;
    }
    .calendar td.selected span {
      background-color: $blackWrapBk2 !important;
    }
    .calendar td:hover span {
      background-color: $blackWrapBk2 !important;
      color: $white !important;
    }
    .calendar td .text {
      color: $blackWrapBk2 !important;
    }
  }
  // 详情页
  .app-detail-title {
    color: $white;
  }
  .app-detail-cont {
    color: $blackFontColor;
  }
  .app-detail .el-row {
    border: none;
  }
  // 场景管理
  .type-content .font_icon {
    background-color: $blackFormBk !important;
    border-color: $blackFormBk !important;
  }
  .type-content ul {
    color: $white;
  }
  .type-content .top_font {
    color: $white;
  }
  .type-content .top_li {
    border-color: $blackFontColor;
  }
  .type-content .top_font_li {
    color: $blackFontColor;
  }
}

$whiteTitleColor: #4C6072;

.skin-white {
  background-color: #f0f0f0 !important;
  .g-bkColor {
    background-color: #f0f0f0 !important;
  }
  .g-bkColor2 {
    color: $whiteTitleColor;
    background-color: #fff !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  }
  // header
  .app-header {
    background-color: #fff !important;
  }
  .app-header .header-left {
    color: #000;
  }
  .app-header .header-center {
    color: #000;
  }
  .app-header .header-right {
    color: #000;
  }
  .app-header .header-logo {
    color: #000;
  }
  // 首页
  .street-box {
    .street-item {
      background-color: #fff !important;
      box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    }
    .street-group {
      padding: 0 .5%;
      box-sizing: border-box;
    }
    .street-name a {
      color: $whiteTitleColor;
    }
    .street-right-main {
      padding: 2px 0 0 2px;
    }
    .alarm-total-title span, .alarm-trend-title span, .fire-safety-title span.title, .cell-paiming-title span.title {
      color: $whiteTitleColor !important;
    }
    .street-right-main .g-bkColor2 {
      width: 266px;
    }
    .cell-paiming-list li span.name, .cell-paiming-list li span.total {
      background-color: #fff !important;
    }

  }
}
